<template>
  <transition name="el-zoom-in-center">
    <div class="JNPF-preview-main">
      <div class="JNPF-common-page-header">
        <el-page-header @back="goBack" :content="!dataForm.id ? '新建':'编辑'"/>
        <div class="options">
          <el-button type="primary" @click="dataFormSubmit()" :loading="btnLoading" :disabled='continueBtnLoading'> 保
            存
          </el-button>
          <el-button @click="goBack"> 取 消</el-button>
        </div>
      </div>
      <el-row :gutter="60" class=" main" :style="{margin: '0 auto',width: '100%'}">
        <el-form ref="formRef" :model="dataForm" :rules="dataRule" size="medium" label-width="100px"
                 label-position="top">
          <template v-if="!loading">
            <!-- 具体表单 -->
            <el-col :span="4">
              <el-row :gutter="30">
                <el-col :span="24">
                  <jnpf-form-tip-item>
                    <JnpfText
                      :textStyle='{"color":"#000000","font-weight":"normal","text-decoration":"none","font-size":12,"line-height":32,"font-style":"normal","text-align":"left"}'>
                    </JnpfText>
                  </jnpf-form-tip-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="16" class="quarterly-main">
              <el-row :gutter="30">
                <el-col :span="24">
                  <jnpf-form-tip-item>
                    <JnpfText
                      :textStyle='{"color":"#1684FC","font-weight":"bold","text-decoration":"none","font-size":24,"line-height":32,"font-style":"normal","text-align":"center"}'
                      content="季度进度填报">
                    </JnpfText>
                  </jnpf-form-tip-item>
                </el-col>
                <el-col :span="12">
                  <jnpf-form-tip-item
                    label="企业名称" prop="enterpriseName">
                    <JnpfInput v-model="dataForm.enterpriseName" @change="changeData('enterpriseName',-1)"
                               placeholder="请输入" readonly clearable :style='{"width":"100%"}'>
                    </JnpfInput>
                  </jnpf-form-tip-item>
                </el-col>
                <el-col :span="12">
                  <jnpf-form-tip-item
                    label="企业信用代码" label-width="120px" prop="enterpriseCreditCode">
                    <JnpfInput v-model="dataForm.enterpriseCreditCode" @change="changeData('enterpriseCreditCode',-1)"
                               placeholder="请输入" readonly clearable :style='{"width":"100%"}'>
                    </JnpfInput>
                  </jnpf-form-tip-item>
                </el-col>
                <el-col :span="16">
                  <jnpf-form-tip-item
                    label="项目名称" prop="projectName">
                    <JnpfInput v-model="dataForm.projectName" @change="changeData('projectName',-1)"
                               placeholder="请输入" readonly clearable :style='{"width":"100%"}'>
                    </JnpfInput>
                  </jnpf-form-tip-item>
                </el-col>
                <el-col :span="12">
                  <jnpf-form-tip-item
                    label="服务商名称" prop="serverName">
                    <JnpfInput v-model="dataForm.serverName" @change="changeData('serverName',-1)"
                               placeholder="请输入" readonly clearable :style='{"width":"100%"}'>
                    </JnpfInput>
                  </jnpf-form-tip-item>
                </el-col>
                <el-col :span="12">
                  <jnpf-form-tip-item
                    label="服务商统一社会信用代码" label-width="185px" prop="serverCreditCode">
                    <JnpfInput v-model="dataForm.serverCreditCode" @change="changeData('serverCreditCode',-1)"
                               placeholder="请输入" readonly clearable :style='{"width":"100%"}'>
                    </JnpfInput>
                  </jnpf-form-tip-item>
                </el-col>
                <el-col :span="12">
                  <jnpf-form-tip-item
                    label="项目负责人" prop="projectLeader">
                    <JnpfInput v-model="dataForm.projectLeader" @change="changeData('projectLeader',-1)"
                               placeholder="请输入" readonly clearable :style='{"width":"100%"}'>
                    </JnpfInput>
                  </jnpf-form-tip-item>
                </el-col>
                <el-col :span="12">
                  <jnpf-form-tip-item
                    label="联系电话" prop="phone">
                    <JnpfInput v-model="dataForm.phone" @change="changeData('phone',-1)"
                               placeholder="请输入" readonly clearable :style='{"width":"100%"}'>
                    </JnpfInput>
                  </jnpf-form-tip-item>
                </el-col>
                <el-col :span="12">
                  <jnpf-form-tip-item
                    label="开始时间" prop="startDate">
                    <JnpfDatePicker v-model="dataForm.startDate" @change="changeData('startDate',-1)"
                                    :startTime="dateTime(false,1,1,'','')" :endTime="dateTime(false,1,1,'','')"
                                    placeholder="请选择" readonly :style='{"width":"100%"}' type="date"
                                    format="yyyy-MM-dd">
                    </JnpfDatePicker>
                  </jnpf-form-tip-item>
                </el-col>
                <el-col :span="12">
                  <jnpf-form-tip-item
                    label="结束时间" prop="endDate">
                    <JnpfDatePicker v-model="dataForm.endDate" @change="changeData('endDate',-1)"
                                    :startTime="dateTime(false,1,1,'','')" :endTime="dateTime(false,1,1,'','')"
                                    placeholder="请选择" readonly :style='{"width":"100%"}' type="date"
                                    format="yyyy-MM-dd">
                    </JnpfDatePicker>
                  </jnpf-form-tip-item>
                </el-col>
                <el-col :span="12">
                  <jnpf-form-tip-item
                    label="区县" label-width="70px" prop="county">
                    <JnpfSelect v-model="dataForm.county" @change="changeData('county',-1)"
                                placeholder="请选择" clearable :style='{"width":"100%"}' :options="countyOptions"
                                :props="countyProps">
                    </JnpfSelect>
                  </jnpf-form-tip-item>
                </el-col>
                <el-col :span="12">
                  <jnpf-form-tip-item
                    label="数字化改造产品或服务预算（万元）" label-width="255px" prop="digitalBudgetTotal">
                    <JnpfInput v-model="dataForm.digitalBudgetTotal" @change="changeData('digitalBudgetTotal',-1)"
                               placeholder="请输入" addonAfter="万元" readonly clearable :style='{"width":"100%"}'>
                    </JnpfInput>
                  </jnpf-form-tip-item>
                </el-col>
                <el-col :span="12">
                  <jnpf-form-tip-item
                    label="其他支出项预算 （万元）" label-width="190px" prop="otherDigitalTotal">
                    <JnpfInput v-model="dataForm.otherDigitalTotal" @change="changeData('otherDigitalTotal',-1)"
                               placeholder="请输入" addonAfter="万元" readonly clearable :style='{"width":"100%"}'>
                    </JnpfInput>
                  </jnpf-form-tip-item>
                </el-col>
                <el-col :span="12">
                  <jnpf-form-tip-item
                    label="总预算 （万元）" label-width="135px" prop="generalBudget">
                    <JnpfInput v-model="dataForm.generalBudget" @change="changeData('generalBudget',-1)"
                               placeholder="请输入" addonAfter="万元" readonly clearable :style='{"width":"100%"}'>
                    </JnpfInput>
                  </jnpf-form-tip-item>
                </el-col>
                <el-col :span="12">
                  <jnpf-form-tip-item
                    label="项目当季完成投资金额 （万元）" label-width="230px" prop="projectInseasonInvestment">
                    <JnpfInputNumber v-model="dataForm.projectInseasonInvestment"
                                     @change="changeData('projectInseasonInvestment',-1)"
                                     placeholder="请输入" addonAfter="万元" :step="1" :controls="false">
                    </JnpfInputNumber>
                  </jnpf-form-tip-item>
                </el-col>
                <el-col :span="12">
                  <jnpf-form-tip-item
                    label="项目累计完成投资金额 （万元）" label-width="230px" prop="projectTotalInvestment">
                    <JnpfInputNumber v-model="dataForm.projectTotalInvestment"
                                     @change="changeData('projectTotalInvestment',-1)"
                                     placeholder="请输入" addonAfter="万元" :step="1" :controls="false">
                    </JnpfInputNumber>
                  </jnpf-form-tip-item>
                </el-col>
                <el-col :span="24">
                  <jnpf-form-tip-item
                    label="项目形象进度" prop="projectImageProgress">
                    <JnpfTextarea v-model="dataForm.projectImageProgress"
                                  @change="changeData('projectImageProgress',-1)"
                                  placeholder="请输入" :style='{"width":"100%"}' true type="textarea"
                                  :autosize='{"minRows":4,"maxRows":4}'>
                    </JnpfTextarea>
                  </jnpf-form-tip-item>
                </el-col>
                <el-col :span="24">
                  <jnpf-form-tip-item
                    label="需协调解决的问题" label-width="130px" prop="solverProblem">
                    <JnpfEditor v-model="dataForm.solverProblem" @change="changeData('solverProblem',-1)"
                                placeholder="请输入" :style='{"width":"100%"}'>
                    </JnpfEditor>
                  </jnpf-form-tip-item>
                </el-col>
<!--                <el-col :span="24">
                  <jnpf-form-tip-item
                    label="外键（项目Id）" label-width="120px" prop="projectId">
                    <JnpfInput v-model="dataForm.projectId" @change="changeData('projectId',-1)"
                               placeholder="请输入" clearable :style='{"width":"100%"}'>
                    </JnpfInput>
                  </jnpf-form-tip-item>
                </el-col>-->
              </el-row>
            </el-col>
            <el-col :span="4">
              <el-row :gutter="30">
                <el-col :span="24">
                  <jnpf-form-tip-item>
                    <JnpfText
                      :textStyle='{"color":"#000000","font-weight":"normal","text-decoration":"none","font-size":12,"line-height":32,"font-style":"normal","text-align":"left"}'>
                    </JnpfText>
                  </jnpf-form-tip-item>
                </el-col>
              </el-row>
            </el-col>
            <!-- 表单结束 -->
          </template>
        </el-form>
        <SelectDialog v-if="selectDialogVisible" :config="currTableConf" :formData="dataForm"
                      ref="selectDialog" @select="addForSelect" @close="selectDialogVisible=false"/>
      </el-row>
    </div>
  </transition>
</template>


<script>
import request from '@/utils/request'
import {mapGetters} from "vuex";
import {getDataInterfaceRes} from '@/api/systemData/dataInterface'
import {getDictionaryDataSelector} from '@/api/systemData/dictionary'
import {getDefaultCurrentValueUserId} from '@/api/permission/user'
import {getDefaultCurrentValueDepartmentId} from '@/api/permission/organize'
import {
  getDateDay,
  getLaterData,
  getBeforeData,
  getBeforeTime,
  getLaterTime
} from '@/components/Generator/utils/index.js'
import {thousandsFormat} from "@/components/Generator/utils/index"

export default {
  components: {},
  props: [],
  data() {
    return {
      dataFormSubmitType: 0,
      continueBtnLoading: false,
      index: 0,
      prevDis: false,
      nextDis: false,
      allList: [],
      visible: false,
      loading: false,
      btnLoading: false,
      formRef: 'formRef',
      setting: {},
      eventType: '',
      userBoxVisible: false,
      selectDialogVisible: false,
      currTableConf: {},
      dataValueAll: {},
      addTableConf: {},
      //可选范围默认值
      ableAll: {},
      tableRows: {},
      Vmodel: "",
      currVmodel: "",
      dataForm: {
        projectName: undefined,
        startDate: undefined,
        endDate: undefined,
        enterpriseName: undefined,
        enterpriseCreditCode: undefined,
        serverName: undefined,
        serverCreditCode: undefined,
        projectLeader: undefined,
        phone: undefined,
        county: undefined,
        digitalBudgetTotal: undefined,
        otherDigitalTotal: undefined,
        generalBudget: undefined,
        projectInseasonInvestment: undefined,
        projectTotalInvestment: undefined,
        projectImageProgress: undefined,
        solverProblem: undefined,
        creatoruserid: undefined,
        creatortime: undefined,
        lastmodifyuserid: undefined,
        lastmodifytime: undefined,
        projectId: undefined,
      },
      tableRequiredData: {},
      dataRule:
        {
          projectName: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            },
          ],
          startDate: [
            {
              required: true,
              message: '请选择',
              trigger: 'change'
            },
          ],
          endDate: [
            {
              required: true,
              message: '请选择',
              trigger: 'change'
            },
          ],
          enterpriseName: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            },
          ],
          enterpriseCreditCode: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            },
          ],
          serverName: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            },
          ],
          serverCreditCode: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            },
          ],
          projectLeader: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            },
          ],
          phone: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            },
          ],
          county: [
            {
              required: true,
              message: '请选择',
              trigger: 'change'
            },
          ],
          digitalBudgetTotal: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            },
          ],
          otherDigitalTotal: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            },
          ],
          generalBudget: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            },
          ],
          projectInseasonInvestment: [
            {
              required: true,
              message: '请输入',
              trigger: ["blur", "change"]
            },
          ],
          projectTotalInvestment: [
            {
              required: true,
              message: '请输入',
              trigger: ["blur", "change"]
            },
          ],
          projectImageProgress: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            },
          ],
          solverProblem: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            },
          ],
        },
      countyOptions: [{"fullName": "鼓楼区", "id": "鼓楼区"}, {"fullName": "台江区", "id": "台江区"}, {
        "fullName": "仓山区",
        "id": "仓山区"
      }, {"fullName": "马尾区", "id": "马尾区"}, {"fullName": "晋安区", "id": "晋安区"}, {
        "fullName": "长乐区",
        "id": "长乐区"
      }, {"fullName": "闽侯县", "id": "闽侯县"}, {"fullName": "连江县", "id": "连江县"}, {
        "fullName": "罗源县",
        "id": "罗源县"
      }, {"fullName": "闽清县", "id": "闽清县"}, {"fullName": "平潭县", "id": "平潭县"}, {
        "fullName": "福清市",
        "id": "福清市"
      }, {"fullName": "高新区", "id": "高新区"}],
      countyProps: {"label": "fullName", "value": "id"},
      childIndex: -1,
      isEdit: false,
      interfaceRes: {
        projectName: [],
        startDate: [],
        endDate: [],
        enterpriseName: [],
        enterpriseCreditCode: [],
        serverName: [],
        serverCreditCode: [],
        projectLeader: [],
        phone: [],
        county: [],
        digitalBudgetTotal: [],
        otherDigitalTotal: [],
        generalBudget: [],
        projectInseasonInvestment: [],
        projectTotalInvestment: [],
        projectImageProgress: [],
        solverProblem: [],
        creatoruserid: [],
        creatortime: [],
        lastmodifyuserid: [],
        lastmodifytime: [],
        projectId: [],
      },
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  watch: {},
  created() {
    this.dataAll()
    // this.initDefaultData()
    this.dataValueAll = JSON.parse(JSON.stringify(this.dataForm))
  },
  mounted() {
  },
  methods: {
    prev() {
      this.index--
      if (this.index === 0) {
        this.prevDis = true
      }
      this.nextDis = false
      for (let index = 0; index < this.allList.length; index++) {
        const element = this.allList[index];
        if (this.index == index) {
          this.getInfo(element.id)
        }
      }
    },
    next() {
      this.index++
      if (this.index === this.allList.length - 1) {
        this.nextDis = true
      }
      this.prevDis = false
      for (let index = 0; index < this.allList.length; index++) {
        const element = this.allList[index];
        if (this.index == index) {
          this.getInfo(element.id)
        }
      }
    },
    getInfo(id) {
      request({
        url: '/api/example/Fz_no_flow_project_quarterly_progress/' + id,
        method: 'get'
      }).then(res => {
        this.dataInfo(res.data)
      });
    },
    changeData(model, index) {
      this.isEdit = false
      this.childIndex = index
      let modelAll = model.split("-");
      let faceMode = "";
      for (let i = 0; i < modelAll.length; i++) {
        faceMode += modelAll[i];
      }
      for (let key in this.interfaceRes) {
        if (key != faceMode) {
          let faceReList = this.interfaceRes[key]
          for (let i = 0; i < faceReList.length; i++) {
            if (faceReList[i].relationField == model) {
              let options = 'get' + key + 'Options';
              if (this[options]) {
                this[options]()
              }
              this.changeData(key, index)
            }
          }
        }
      }
    },
    changeDataFormData(type, data, model, index, defaultValue) {
      if (!this.isEdit) {
        if (type == 2) {
          for (let i = 0; i < this.dataForm[data].length; i++) {
            if (index == -1) {
              this.dataForm[data][i][model] = defaultValue
            } else if (index == i) {
              this.dataForm[data][i][model] = defaultValue
            }
          }
        } else {
          this.dataForm[data] = defaultValue
        }
      }
    },
    dataAll() {
    },
    goBack() {
      this.$emit('refresh')
    },
    clearData() {
      this.dataForm = JSON.parse(JSON.stringify(this.dataValueAll))
    },
    init(id, isDetail, allList, projectInfo) {
      this.prevDis = false
      this.nextDis = false
      this.allList = allList || []
      if (allList.length) {
        this.index = this.allList.findIndex(item => item.id === id)
        if (this.index == 0) {
          this.prevDis = true
        }
        if (this.index == this.allList.length - 1) {
          this.nextDis = true
        }
      } else {
        this.prevDis = true
        this.nextDis = true
      }
      this.dataForm.id = id || 0;
      this.dataForm.projectId = projectInfo.F_Id;
      this.visible = true;
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.loading = true
          request({
            url: '/api/example/Fz_no_flow_project_quarterly_progress/' + this.dataForm.id,
            method: 'get'
          }).then(res => {
            this.dataInfo(res.data)
            this.loading = false
          });
        } else {
          this.clearData()
          this.initDefaultData(projectInfo)
        }
      });
      this.$store.commit('generator/UPDATE_RELATION_DATA', {})
    },
    //初始化默认数据
    initDefaultData(projectInfo) {
      this.dataForm.projectName = projectInfo.projectName;
      this.dataForm.startDate = new Date(projectInfo.startDate).getTime();
      this.dataForm.endDate = new Date(projectInfo.endDate).getTime();
      this.dataForm.enterpriseName = projectInfo.enterpriseName;
      this.dataForm.enterpriseCreditCode = projectInfo.enterpriseCreditCode;
      this.dataForm.serverName = projectInfo.serverName;
      this.dataForm.serverCreditCode = projectInfo.serverCreditCode;
      this.dataForm.projectLeader = projectInfo.projectLeader;
      this.dataForm.phone = projectInfo.phone;
      this.dataForm.county = projectInfo.county;
      this.dataForm.digitalBudgetTotal = projectInfo.digitalBudgetTotal;
      this.dataForm.otherDigitalTotal = projectInfo.otherDigitalTotal;
      this.dataForm.generalBudget = projectInfo.generalBudget;
      this.dataForm.projectId = projectInfo.id;
    },
    // 表单提交
    dataFormSubmit(type) {
      this.dataFormSubmitType = type ? type : 0
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          this.request()
        }
      })
    },
    request() {
      let _data = this.dataList()
      if (this.dataFormSubmitType == 2) {
        this.continueBtnLoading = true
      } else {
        this.btnLoading = true
      }
      if (!this.dataForm.id) {
        request({
          url: '/api/example/Fz_no_flow_project_quarterly_progress',
          method: 'post',
          data: _data
        }).then((res) => {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: 1000,
            onClose: () => {
              if (this.dataFormSubmitType == 2) {
                this.$nextTick(() => {
                  this.clearData()
                  this.initDefaultData()
                })
                this.continueBtnLoading = false
                return
              }
              this.visible = false
              this.btnLoading = false
              this.$emit('refresh', true)
            }
          })
        }).catch(() => {
          this.btnLoading = false
          this.continueBtnLoading = false
        })
      } else {
        request({
          url: '/api/example/Fz_no_flow_project_quarterly_progress/' + this.dataForm.id,
          method: 'PUT',
          data: _data
        }).then((res) => {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: 1000,
            onClose: () => {
              if (this.dataFormSubmitType == 2) return this.continueBtnLoading = false
              this.visible = false
              this.btnLoading = false
              this.$emit('refresh', true)
            }
          })
        }).catch(() => {
          this.btnLoading = false
          this.continueBtnLoading = false
        })
      }
    },
    openSelectDialog(key) {
      this.currTableConf = this.addTableConf[key]
      this.currVmodel = key
      this.selectDialogVisible = true
      this.$nextTick(() => {
        this.$refs.selectDialog.init()
      })
    },
    addForSelect(data) {
      for (let i = 0; i < data.length; i++) {
        let t = data[i]
        if (this['get' + this.currVmodel]) {
          this['get' + this.currVmodel](t)
        }
      }
    },
    dateTime(timeRule, timeType, timeTarget, timeValueData, dataValue) {
      let timeDataValue = null;
      let timeValue = Number(timeValueData)
      if (timeRule) {
        if (timeType == 1) {
          timeDataValue = timeValue
        } else if (timeType == 2) {
          timeDataValue = dataValue
        } else if (timeType == 3) {
          timeDataValue = new Date().getTime()
        } else if (timeType == 4) {
          let previousDate = '';
          if (timeTarget == 1 || timeTarget == 2) {
            previousDate = getDateDay(timeTarget, timeType, timeValue)
            timeDataValue = new Date(previousDate).getTime()
          } else if (timeTarget == 3) {
            previousDate = getBeforeData(timeValue)
            timeDataValue = new Date(previousDate).getTime()
          } else {
            timeDataValue = getBeforeTime(timeTarget, timeValue).getTime()
          }
        } else if (timeType == 5) {
          let previousDate = '';
          if (timeTarget == 1 || timeTarget == 2) {
            previousDate = getDateDay(timeTarget, timeType, timeValue)
            timeDataValue = new Date(previousDate).getTime()
          } else if (timeTarget == 3) {
            previousDate = getLaterData(timeValue)
            timeDataValue = new Date(previousDate).getTime()
          } else {
            timeDataValue = getLaterTime(timeTarget, timeValue).getTime()
          }
        }
      }
      return timeDataValue;
    },
    time(timeRule, timeType, timeTarget, timeValue, formatType, dataValue) {
      let format = formatType == 'HH:mm' ? 'HH:mm:00' : formatType
      let timeDataValue = null
      if (timeRule) {
        if (timeType == 1) {
          timeDataValue = timeValue || '00:00:00'
          if (timeDataValue.split(':').length == 3) {
            timeDataValue = timeDataValue
          } else {
            timeDataValue = timeDataValue + ':00'
          }
        } else if (timeType == 2) {
          timeDataValue = dataValue
        } else if (timeType == 3) {
          timeDataValue = this.jnpf.toDate(new Date(), format)
        } else if (timeType == 4) {
          let previousDate = '';
          previousDate = getBeforeTime(timeTarget, timeValue)
          timeDataValue = this.jnpf.toDate(previousDate, format)
        } else if (timeType == 5) {
          let previousDate = '';
          previousDate = getLaterTime(timeTarget, timeValue)
          timeDataValue = this.jnpf.toDate(previousDate, format)
        }
      }
      return timeDataValue;
    },
    dataList() {
      var _data = this.dataForm;
      return _data;
    },
    dataInfo(dataAll) {
      let _dataAll = dataAll
      this.dataForm = _dataAll
      this.isEdit = true
      this.dataAll()
      this.childIndex = -1
    },
  },
}

</script>
<style lang="scss" scoped>
.main {
  ::v-deep .is-disabled .el-input__inner {
    background: #FFFFFF;
    color: #606266;
  }

  height: 100%;

  .quarterly-main {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1) !important;
    border: 1px solid #EBEEF5;
    padding: 20px;
    border-radius: 5px;

    .el-select {
      pointer-events: none;

      .el-input__suffix {
        display: none;
      }
    }
  }
}
</style>
